<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>寻车系统</title>
        <link rel="stylesheet" href="../css/init.css">
        <link rel="stylesheet" href="../css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/home.css">
        <link rel="stylesheet" href="../css/hasCar.min.css">
        <script src="../js/flexible.debug.js"></script>
        <script src="../js/vue.min.js"></script>
        <script src="../js/zepto.min.js"></script>
        <style>

        </style>
    </head>

    <body>
        <div id="app">
            <div class="content">
                <div class="header">
                    <div class="name">寻车系统</div>
                    <div class="subTitle">自助寻车 一键查询</div>
                    <div class="search" id="plate" @click="onTypewriting">
                        <input type="text" placeholder="请输入完整的车牌号" v-model="carNumber" readonly="true"><span>查询</span>
                    </div>
                </div>
                <div class="box">
                    <div class="default" v-if="type===1">
                        <h4>查询说明</h4>
                        <div class="info">
                            请输入完整的车牌号，并确保车辆正确停放在规定的车位中，如无法查询车辆请与工作人联系。
                        </div>
                        <img class="centerImg" src="../images/park.png" alt="">
                    </div>
                    <div class="errorPage" v-else-if="type === 2">
                        <img class="noPlate" src="../images/noplate.png" alt="">
                        <p>未找到相关车辆信息</p>
                    </div>
                    <div class="carMap" v-else>
                        <div class="map">
                            <h3>车辆示意图({{area}}区)</h3>
                            <div class="mapBox">
                                <div class="containBox" v-if="area==='A' ">
                                    <img src="../images/abg.png" alt="" class="backImg">
                                    <div class="left_col1">
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A111"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A112"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A113"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A114"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A115"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A116"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A117"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                id="A118"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A119"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                id="A120"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                id="A121"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A122"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                id="A123"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A124"> </div>
                                        <div class="box_right "> <img class="needImg" src="../images/space.png"
                                                id="A125"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A126"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A127"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                id="A128"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A129"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A130"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A131"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A132"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A133"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A134"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A135"> </div>
                                        <div class="box_right margin-sm"> <img class="needImg"
                                                src="../images/rightcar.png" id="A136"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A137"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="A138"> </div>

                                    </div>
                                    <div class="left_col2">
                                        <div class="first_col">
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A83"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A84"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A85"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A86"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A87"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A88"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A89"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A90"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A91"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A92"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A93"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A94"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A95"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A96"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A97"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A98"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A99"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A100"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A101"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A102"> </div>
                                            <div class="placeBox">

                                            </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A105"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A106"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A107"> </div>
                                            <div class="box_left margin-sm"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A108"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A109"> </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A110"> </div>
                                        </div>
                                        <div class="second_col">
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A55"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A56"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A57"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A58"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A59"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A60"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A61"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A62"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A63"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A64"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A65"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A66"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A67"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A68"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A69"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A70"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A71"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A72"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A73"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A74"> </div>
                                            <div class="placeBox">

                                            </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A77"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A78"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A79"> </div>
                                            <div class="box_right margin-sm"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A80"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A81"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A82"> </div>

                                        </div>
                                    </div>
                                    <div class="left_col3">
                                        <div class="before_col">
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A36"> </div>
                                            <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                    id="A37"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A38"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A39"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A40"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A41"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A42"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A43"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/space.png" id="A44"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A45"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A46"> </div>
                                            <div class="box_left margin-md"> <img class="needImg"
                                                    src="../images/leftcar.png" id="A47"> </div>
                                            <div class="placeBigBox">

                                            </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A48"> </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A49"> </div>
                                            <div class="placeBox">

                                            </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A50"> </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A51"> </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A52"> </div>
                                            <div class="placeBox-sm">

                                            </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A53"> </div>
                                            <div class="box_left "> <img class="needImg" src="../images/leftcar.png"
                                                    id="A54"> </div>

                                        </div>
                                        <div class="after_col">
                                            <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                    id="A27"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/space.png"
                                                    id="A28"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A29"> </div>
                                            <div class="box_right margin-md"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A30"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A31"> </div>
                                            <div class="placeBigBox">

                                            </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A32"> </div>
                                            <div class="placeBox-sm">

                                            </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A33"> </div>
                                            <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                    id="A34"> </div>
                                            <div class="box_right offsetMargin"> <img class="needImg"
                                                    src="../images/rightcar.png" id="A35"> </div>
                                        </div>
                                    </div>
                                    <div class="left_col4">
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A01"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A02"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A03"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A04"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A05"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A06"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A07"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A08"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A09"> </div>
                                        <div class="placeBox">

                                        </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A10"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A11"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A12"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A13"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A14"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A15"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A16"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A17"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A18"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A19"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A20"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A21"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A22"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A23"> </div>
                                        <div class="box_left margin-sm"> <img class="needImg"
                                                src="../images/leftcar.png" id="A24"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A25"> </div>
                                        <div class="box_left"> <img class="needImg" src="../images/leftcar.png"
                                                id="A26"> </div>

                                    </div>
                                </div>
                                <div class="bareabox" v-if="area==='B'">
                                    <img src="../images/bbg.png" alt="" class="backImg bimg">

                                    <!-- 第一部分 -->
                                    <div class="bfirst">

                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B01">
                                        </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B02"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B03"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B04"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png" id="B05">
                                        </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png" id="B06">
                                        </div>
                                        <div class="box_right"> <img src="../images/space.png"
                                                class="marginBottom needImg" id="B07"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/space.png" id="B08">
                                        </div>

                                        <div class="box_right"> <img class="needImg" src="../images/space.png" id="B09">
                                        </div>
                                        <div class="box_right"> <img src="../images/space.png"
                                                class="marginBottom needImg" id="B10"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B11"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B12"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png" class="needImg"
                                                id="B13"> </div>
                                        <div class="box_space">
                                            <img class="needImg">
                                            <img class="needImg">
                                            <img class="needImg">
                                        </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B14"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B15"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B16"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B17"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B18"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B19"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B20"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B21"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B22"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B23"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B24"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B25"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B26"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B27"> </div>
                                        <div class="box_right"> <img src="../images/rightcar.png"
                                                class="marginBottom needImg" id="B28"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B29"> </div>
                                        <div class="box_right"> <img class="needImg" src="../images/rightcar.png"
                                                id="B30"> </div>
                                    </div>

                                    <!-- 第二部分 -->
                                    <div class="bsecond">

                                        <div class="second_box_one">
                                            <div class="box_left"><img src="../images/leftcar.png" id="B31"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B32"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B33"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B34"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B35"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B36"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B37"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B38"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B39"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B40"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B41"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B42"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B43"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B44"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B45"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B46"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B47"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B48"
                                                    class="needImg  marginBigBottom"></div>
                                            <div class="box_left"><img src="../images/leftcar.png" id="B49"
                                                    class="needImg"></div>
                                        </div>
                                        <div class="second_box_second">
                                            <div class="box_left rotate_img  horTop"> <img class="needImg"
                                                src="../images/leftcar.png" id="B50"> </div>
                                            <div class="box_left opprotate_img  horBot"> <img class="needImg"
                                                    src="../images/leftcar.png" id="B70"></div>
                                        </div>
                                        <div class="second_box_third">
                                            <div class="box_right"><img src="../images/rightcar.png" id="B51"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B52"
                                                    class="needImg marginBigBottom"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B53"
                                                    class="needImg"></div>
                                            <div class="gangway">
                                                <div></div>
                                            </div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B54"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B55"
                                                    class="needImg  midBottom"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B56"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B57"
                                                    class="needImg  midBottom"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B58"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B59"
                                                    class="needImg"></div>
                                            <div class="midgangway">
                                                <div></div>
                                            </div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B60"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B61"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B62"
                                                    class="needImg midBigBottom"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B63"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B64"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B65"
                                                    class="needImg"></div>
                                            <div class="thirdgangway">
                                                <div></div>
                                            </div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B66"
                                                    class="needImg marginBigBottom"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B67"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B68"
                                                    class="needImg"></div>
                                            <div class="box_right"><img src="../images/rightcar.png" id="B69"
                                                    class="needImg "></div>
                                        </div>

                                    </div>
                                    <div class="bthird">
                                        <div class="third_one">
                                                <div class="box_left"><img src="../images/leftcar.png" id="B71" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B72" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B73" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B74" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B75" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B76" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B77" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B78" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B79" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B80" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B81" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B82" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B83" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B84" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B85" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B86" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B87" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B88" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B89" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B90" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B91" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="B92" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B93" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B94" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B95" class="marginBottom needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B968" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B97" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="B98" class="needImg"></div>
                                        </div>
                                        <div class="third_two">
                                                <div class="box_right"><img src="../images/rightcar.png" id="B99" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B100" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B101" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B102" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B103" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B104" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B105" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B106" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B107" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B108" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B109" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B110" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B111" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B112" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B113" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B114" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B115" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B116" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B117" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B118" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B119" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="B120" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B121" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B122" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B123" class="marginBottom needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B124" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B125" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="B126" class="needImg"></div>
                                        </div>

                                    </div>
                                <div class="bfour">
                                        <div class="box_left"><img src="../images/leftcar.png" id="B127" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B128" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B129" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B130" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B131" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B132" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B133" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B134" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B135" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B136" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B137" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B138" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B139" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B140" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B141" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B142" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B143" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B144" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B145" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B146" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B147" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B148" class="needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B149" class="marginBottom needImg"></div>
                                        <div class="box_left"><img src="../images/leftcar.png" id="B150" class="needImg"></div>
                                </div>
                                </div>
                                <!-- c区域 -->
                              <div class="careabox" v-if="area==='C'">
                                 <img src="../images/cbg.png" alt="" class="backImg cimg">
                                <div class="carea_top">
                                        <div class="box_down">
                                                <img src="../images/horspace.png" class="needImg" id="C044">
                                                
                                        </div>
                                        <div class="box_down">
                                                <img src="../images/directionDown.png" class="needImg" id="C045">
                                                
                                        </div>
                                        <div class="box_down">
                                                <img src="../images/directionDown.png" class="needImg" id="C046">
                                                
                                        </div>
                                        <div class="box_down">
                                                <img src="../images/directionDown.png" class="needImg" id="C047">
                                                
                                        </div>
                                        <div class="box_down">
                                                <img src="../images/directionDown.png" class="needImg" id="C048">
                                                
                                        </div>
                                </div>
                                <div class="left_area">
                                        <div class="box_left"><img src="../images/rightcar.png" id="C001" class="needImg left_area_bottom"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C002" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C003" class="needImg "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C004" class="needImg left_area_bottom"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C005" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C006" class="needImg "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C007" class="needImg left_area_bottom"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C008" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C009" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C010" class="needImg left_area_bottom "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C011" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C012" class="needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C013" class="needImg left_area_bottom "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C014" class="needImg margin_bottom"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C015" class="car_bottom needImg"></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C016" class="car_bottom needImg "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C017" class="car_bottom needImg left_area_bottom">
                                        </div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C018" class="car_bottom needImg"></div>
                                        <div class="box_left"><img src="../images/space.png" id="C019" class="car_bottom needImg "></div>
                                        <div class="box_left"><img src="../images/rightcar.png" id="C020" class="car_bottom needImg left_area_bottom">
                                        </div>
                                </div>
                                <!-- 中间区域 -->
                                <div class="middle_box">
                                        <div class="middle1 middle5">
                                                <div class="box_left"><img src="../images/leftcar.png" id="C043" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C042" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C041" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C040" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C039" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C038" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C037" class="needImg mid_min"></div>
                                                <div class="rotatebox">
                                                <div class="box_down special_img"><img
                                                        src="../images/directionDown.png" id="C036" class="needImg "></div>
                                                <div class="box_down special_img"><img src="../images/directionDown.png" id="C035"
                                                                class="needImg "></div>
                                                </div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C034" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C033" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C032" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C031" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C030" class="needImg"></div>
                                        </div>
                                        <div class="middle1 middle6">
                                                <div class="box_left"><img src="../images/rightcar.png" id="C049" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C050" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C051" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C052" class="needImg mid_min"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C053" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C054" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C055" class="needImg mid_special"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C056" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C057" class="needImg"></div>
                                                <div class="bigspacebox"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C058" class="needImg mid_min_min"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C059" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C060" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C061" class="needImg mid_min_min"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C062" class="needImg"></div>
                                        </div>
                                        <div class="middle1 middle3">
                                                <div class="box_right"><img src="../images/leftcar.png" id="C079" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C078" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C077" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C076" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C075" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C074" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C073" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C072" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C071" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C070" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C069" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C068" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C067" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C066" class="needImg"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C065" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="C064" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/leftcar.png" id="C063" class="needImg"></div>
                                        </div>
                                        <div class="middle1 middle4">
                                                <div class="box_left"><img src="../images/rightcar.png" id="C080" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C081" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C082" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C083" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C084" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C085" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C086" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C087" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C088" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C089" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C090" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C097" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C092" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C093" class="needImg"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C094" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C095" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/rightcar.png" id="C096" class="needImg"></div>
                                        </div>
                                        <div class="middle1 mid0">
                                                <div class="box_left"><img src="../images/leftcar.png" id="C113" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C112" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C111" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C110" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C109" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C108" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C107" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C106" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C105" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C104" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C103" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C102" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C101" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C100" class="needImg"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C099" class="needImg"></div>
                                                <div class="box_left"><img src="../images/space.png" id="C098" class="needImg mid-space"></div>
                                                <div class="box_left"><img src="../images/leftcar.png" id="C097" class="needImg"></div>
                                        </div>
                                        <div class="middle1 middle2">
                                                <div class="box_right"><img src="../images/rightcar.png" id="C114" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C115" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C116" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="C117" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C118" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C119" class="needImg"></div>
                                                <div class="box_right"><img src="../images/space.png" id="C120" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C121" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C122" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C123" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C124" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C125" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C126" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C127" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C128" class="needImg"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C129" class="needImg mid-space"></div>
                                                <div class="box_right"><img src="../images/rightcar.png" id="C130" class="needImg"></div>
                                        </div>
                                </div>
                                        <!-- 右侧区域 --> 
                                <div class="right_area">
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg" id="C131"></div>
                                        <div class="box_right"><img src="../images/leftcar.png" class="needImg mid_min" id="C132"></div>
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg " id="C133"></div>
                                        <div class="box_right"><img src="../images/space.png" class="needImg " id="C134"></div>
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg mid_min" id="C135"></div>
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg" id="C136"></div>
                                        <div class="box_right"> <img src="../images/space.png" class="needImg " id="C137"></div>
                                        <div class="box_right"> <img src="../images/space.png" class="needImg left_area_bottom" id="C138"></div>
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg mid_min" id="C139"></div>
                                        <div class="box_right"> <img src="../images/leftcar.png" class="needImg mid_min" id="C140"></div>
                                </div>
                                        <!-- 底部区域 --> 
                                <div class="carea_bottom">
                                        <div class="box_top"><img src="../images/horspace.png" class="needImg" id="C021"></div>
                                        <div class="box_top"> <img src="../images/directionTop.png" class="needImg" id="C022"></div>
                                        <div class="box_top"> <img src="../images/directionTop.png" class="needImg" id="C023"></div>
                                        <div class="box_top"> <img src="../images/directionTop.png" class="needImg " id="C024 "></div>
                                        <div class="box_top"> <img src="../images/directionTop.png" class="needImg" id="C025"></div>
                                        <div class="box_top"> <img src="../images/directionTop.png" class="needImg" id="C026"></div>
                                        <div class="box_top"><img src="../images/directionTop.png" class="needImg " id="C027 "></div>
                                        <div class="box_top"><img src="../images/directionTop.png" class="needImg" id="C028"></div>
                                        <div class="box_top"><img src="../images/directionTop.png" class="needImg" id="C029"></div>
                                </div>

                              </div>  

                            </div>
                        </div>
                    </div>
                </div>
                <div class="copy"><img src="../images/logo.png" />武汉爱迪科技提供技术支持</div>
                <div class="keybord_bottom" v-show="showTyper===1||showTyper===2">
                    <div class="close"><button class="closeBtn" @click="closeKeybord">关闭</button></div>
                    <div class="demo-block" id="prosBord" v-show="showTyper===1">
                        <div class="keyboard">
                            <div class="btn-box" style="display:inline-block;" v-for="item in provinces"><button
                                    class="keybord_btn" @click="input(item)">{{item}}</button></div>
                            <div class="btnBox">
                                <button class="keybord_btn functionBtn" id="sure_btn" @click="change(1)"><img
                                        src="../images/keyCode.png" alt=""></button>
                                <div class="newplate">
                                    <div class="btn-box" style="display:inline-block;" v-for="item in specialPlate">
                                        <button class="keybord_btn" @click="input(item)">{{item}}</button></div>
                                </div>
                                <button class="keybord_btn functionBtn" id="dele_btn" @click="input('Del')"><img
                                        src="../images/delete.png" alt=""></button>
                            </div>
                        </div>

                    </div>
                    <div class="demo-block" id="keysBord" v-show="showTyper===2">
                        <div class="keyboard">
                            <div class="btn-box" style="display:inline-block;" v-for="(item,index) in keyNums"
                                :name="index" :key="index"><button class="keybord_btn"
                                    @click="input(item)">{{item}}</button></div>
                            <div class="btnBox">
                                <button class="keybord_btn functionBtn" id="sure_btn" @click="change(2)"><img
                                        src="../images/keyCode.png" alt=""></button>
                                <div class="newplate">
                                    <div class="btn-box" style="display:inline-block;" v-for="item in specialChar">
                                        <button class="keybord_btn" @click="input(item)">{{item}}</button></div>
                                </div>
                                <button class="keybord_btn functionBtn" id="dele_btn" @click="input('Del')"><img
                                        src="../images/delete.png" alt=""></button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- div content  end-->
            </div>
            <!-- div app end -->
            </div>
            <script>
                var vue = new Vue({
                    el: '#app',
                    data: {
                        carNum: "",
                        palateAry: [],
                        showTyper: 0,    //输入法的值，0表示不显示，1表示显示省输入键盘，2表示显示数字字母输入键盘
                        provinces: ["京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀",    //省
                            "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂",
                            "津", "贵", "云", "桂", "琼", "青", "藏",
                            "蒙", "宁", "甘", "陕", "闽", "赣", "湘"],
                        specialPlate: ["新", "使", "领", "学", "警", "港", "澳"],
                        keyNums: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",     //数字字母
                            "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P",
                            "A", "S", "D", "F", "G", "H", "J", "K", "L"
                        ],
                        specialChar: ["Z", "X", "C", "V", "B", "N", "M"],
                        carNumber: '',    //输入的值
                        contactInfo: "",
                        contactPer: "1234",
                        IDCard: "",
                        dropMenu: false,
                        reason: "",
                        showAgree: false,
                        type: 3,
                        area: 'B'

                    },
                    directives: {
                        focus: {
                            inserted: function (el, { value }) {
                                console.log(el, { value })
                                if (value) {
                                    el.focus();
                                }
                            }
                        }
                    },
                    mounted: function () {
                            if(false){
                                this.changPlace()
                            }
                    },
                    methods: {
                        changPlace: function () {
                            var ele = $(".mid0").children()
                            var rele = [].reverse.apply(ele);
                            $(".mid0").empty();
                            $(".mid0").append(rele)

                        },
                        spread: function () {
                            this.dropMenu = !this.dropMenu;
                        },
                        popAgree: function () {
                            this.showAgree = true;
                        },
                        submit: function () {


                        },
                        focus: function () {//其他输入框获得焦点是，自定义键盘隐藏
                            this.showTyper = 0;
                        },
                        onTypewriting: function () {    //点击输入框时，弹出键盘
                            console.log("123");

                            this.showTyper = 1;
                            this.changeTyper();
                        },
                        changeTyper: function () {    //判断输入的车牌号处于什么状态，为空？已输入第一个值（即省）？输入省之后的值？
                            if (this.carNumber.length >= 1) {
                                this.showTyper = 2;
                            }
                            if (this.carNumber.length == 0) {
                                this.showTyper = 1;
                            }
                        },
                        input: function (item) {    //键盘点击事件，传入键盘本身的值
                            if (item == 'Del') {    //判断是否点击了删除按钮
                                this.carNumber = this.carNumber.slice(0, -1);
                                this.changeTyper();
                                return;
                            }
                            if (this.carNumber.length <= 8) {    //判断当前的车牌号的数目是否合法，还未超出7位则可继续输入
                                this.carNumber = this.carNumber + item;
                                this.changeTyper();
                            } else {
                                alert('车牌号码超出正常范围');
                            }
                        },
                        change: function (num) {
                            this.showTyper = num == 1 && 2 || num == 2 && 1;
                        },
                        closeKeybord: function () {
                            // 新能源
                            var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
                            var carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                            if (this.carNumber.length === 7) {
                                if (!carNumberReg.test(this.carNumber)) {
                                    alert('请输入正确的车牌号码');
                                    return;
                                }
                            } else if (this.carNumber.length === 8) {
                                if (!xreg.test(this.carNumber)) {
                                    alert('请输入正确的车牌号码');
                                    return;
                                }
                            } else {
                                alert('请输入正确的车牌号码');
                            }
                            this.showTyper = 0;
                        },
                        //查询车辆信息
                        search_car: function () {

                        }

                    }
                })
            </script>
    </body>

</html>